<template>
    <div>
        <div class="background">
            <section class="header">
                <video autoplay loop class="void-background" muted plays-inlne>
                    <source src="../mv/G1s.mp4" type="video/mp4"/>
                    浏览器不支持 video 标签，建议升级浏览器。
                </video>
            </section>
        </div>
        <div>
            <table border="1"
                   style="margin: 80px auto 20px;width: 90%; font-size: 1.2em; background: rgba(255,255,255,0.8)">
                <tr>
                    <th>id</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>身份</th>
                    <th>主题诗词</th>
                    <th>操作</th>
                </tr>
                <tr v-for="(item, index) in data" :key="index">
                    <td>{{ item.id }}</td>
                    <td>{{ item.name }}</td>
                    <td>{{ item.gender }}</td>
                    <td>{{ item.identity }}</td>
                    <td>{{ item.poetry }}</td>
                    <td>
                        <button @click="del(item.id)">删除</button>
                        <br>
                        <router-link :to="{path:'/update',query: {index: item.id}}">
                            <button class="btn btn-default">修改</button>
                        </router-link>
                    </td>
                </tr>
            </table>
            <button @click="$router.push('/index')">
                返回
            </button>
        </div>
    </div>
</template>

<script>
    export default {
        name: "admin",
        data() {
            return {
                data: {},
            }
        },
        created() {
            this.loadData();
        },
        methods: {
            loadData() {
                this.$axios.get('/api/mybatis/CharacterList').then(res => {
                    this.data = res.data.data;
                })
            },
            del(id) {
                this.$axios.delete(`/api/character/${id}`).then((res) => {
                    console.log(res)
                    if (res.data.status === 1) {
                        console.log(res.data.status)
                        // 如果创建成功
                        this.$router.go(0);
                        this.$message.success('删除成功');
                    } else {
                        this.$message.error('删除失败');
                    }
                })
            },
        },
    }
</script>

<style scoped>
    button {
        width: 100px;
        height: 30px;
    }

    @import "../css/admin.css";
</style>